/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/

//  1.页面一加载,发送ajax请求学员信息列表
const initData = () => {
    axios({
        url: '/score/list',
        method: 'get',
    }).then(res => {
        //  成功回调
        console.log(res)
        let data = res.data.data
        console.log(data)
        //  此时接口服务器返回的是个对象   Object.keys遍历这个对象
        document.querySelector('tbody').innerHTML = Object.keys(data).map(item => `
        <tr>
          <th scope="row">${item}</th>
          <td>${data[item].name}</td>
          <td data-stu_id="${item}" data-batch="1" class="score">${data[item].score[0]}</td>
          <td data-stu_id="${item}" data-batch="2" class="score">${data[item].score[1]}</td>
          <td data-stu_id="${item}" data-batch="3" class="score">${data[item].score[2]}</td>
          <td data-stu_id="${item}" data-batch="4" class="score">${data[item].score[3]}</td>
          <td data-stu_id="${item}" data-batch="5" class="score">${data[item].score[4]}</td>
        </tr>
        `).join('')
    })
}

//  2.点击分数td,给当前td动态添加一个input输入框
//  (1)td标签是动态新增的元素,需要注册委托事件

document.querySelector('tbody').addEventListener('click', function (e) {
    //  判断点击分数动态新增input按钮
    if (!e.target.classList.contains('score')) {
        return
    }
    //  新增一个input按钮
    const inp = document.createElement('input')
    //  给input点击追加类名
    inp.classList.add('inp')
    inp.value = e.target.innerHTML
    //  添加到父元素
    e.target.appendChild(inp)
    //  优化 ：自动聚焦
    // inp.focus()
    //  自动选中(自动聚焦top版)
    inp.select()

    //  3.input失去焦点则移除
    inp.addEventListener('blur', function () {
        this.remove()
    })

    //  4.输入框enter事件
    //  注意点 ：要在键盘事件外面获取td，因为键盘事件中的e喝点击事件里面的e不是同一个事件对象
    const td = e.target
    inp.addEventListener('keydown', function (e) {
        //  (1)判断用户点击的是不是enter键
        if (e.key == 'Enter') {
            //  (2)获取参数 ：stu_id  batch  score
            let stu_id = td.dataset.stu_id
            let batch = td.dataset.batch
            let score = inp.value
            //  (3)发送ajax请求 ：成功重新加载列表    失败提示用户
            axios({
                url: '/score/entry',
                method: 'post',
                data: { stu_id, batch, score }
            }).then(res => {
                //成功回调
                console.log(res)
                //  修改判断
                if (res.data.code == 0) {
                    Toast.success(res.data.message)
                    //  刷新列表
                    initData()
                }
            }).catch(err => {
                /* 
                (1) 一般情况下，如果参数错误，服务器会在res的data里面返回一个code告诉你失败
                (2) 个别接口，参数错误不在res里返回code，而是直接网络错误400
                    如果是ajax网络错误，就会执行catch
                */
                Toast.fail(err.response.data.message)
                /* 
                  爆红解决方案,清除控制台
                setTimeout(() => {
                    console.clear()
                }, 3000) */
            })
        }
    })
})
initData()
